<template>
    <view class="bang-easy-input bang-input-base-bgc" :class="{'bang-textarea':type==='textarea'}">
        <uni-easyinput v-model="value" :type="type"
                       :placeholder="placeholder" :focus="focus"
                       :inputBorder="inputBorder" :maxlength="_maxlength" :placeholderStyle="placeholderStyle"
                       :autoHeight="autoHeight" :clearable="clearable" :trim="trim" :styles="styles"
                       :disabled="disabled" @blur="blur"
                       @input="input" @change="change" @focus="focusHandler">
            <template #right>
                <slot name="right"></slot>
            </template>
        </uni-easyinput>
    </view>
</template>

<script setup>
import {isEmpty, isNotEmpty} from '@/qly/verificate'

const emits = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur'])

const props = defineProps({
    modelValue: {type: [String, Number], default: null},
    type: {type: String, default: 'text'},
    placeholder: {type: String, default: $t('common.pleaseEnter')},
    inputBorder: {type: Boolean, default: false},
    maxlength: {type: [Number, String], default: 140},
    fractionDigits: {type: [Number, String], default: 2},
    clearable: {type: Boolean, default: true},
    trim: {type: Boolean, default: false},
    disabled: {type: Boolean, default: false},
    autoHeight: {type: Boolean, default: true},
    styles: {type: Object, default: () => ({})},
    max: {type: [Number, String], default: null},
    min: {type: [Number, String], default: null},
    focus: {type: Boolean, default: false},
})

const value = useModel(props, 'modelValue')
const _maxlength = computed(() => {
    if (props.maxlength instanceof Number) {
        return props.maxlength
    } else {
        return toNumber(props.maxlength)
    }
})

const placeholderStyle = 'font-family: PingFang-SC-Medium, PingFang-SC-Medium; font-weight: normal; '
        + 'font-size: 28rpx; color: #898989;'

const input = (e) => {
    nextTick(() => {
        if (isEmpty(e)) {
            emits('input', e)
            return
        }
        
        if (props.type == 'digit' && props.fractionDigits && toNumber(props.fractionDigits) > 0) {
            const fractionDigits = toNumber(props.fractionDigits)
            // 获取输入框值的小数点后的位数
            const dotIndex = e.indexOf('.')
            if (dotIndex !== -1) {
                // 获取小数点后的值
                const decimalPart = e.substring(dotIndex + 1)
                // 判断小数点后的值是否超过限制
                if (decimalPart.length > fractionDigits) {
                    value.value = toNumber(parseFloat(e).toFixed(fractionDigits))
                }
            }
            // 触发父组件的input事件
            emits('input', value.value)
        } else {
            emits('input', e)
        }
    })
}

const change = (e) => {
    nextTick(() => {
        if (isEmpty(e)) {
            emits('change', e)
            return
        }
        
        if (['number', 'digit'].includes(props.type)) {
            // 校验最大值
            const eAsNumber = toNumber(e)
            if (isNotEmpty(props.max) && eAsNumber > toNumber(props.max)) {
                value.value = props.max
            }
            // 校验最小值
            if (isNotEmpty(props.min) && eAsNumber < toNumber(props.min)) {
                value.value = props.min
            }
            // 触发父组件的change事件
            emits('change', value.value)
        } else {
            emits('change', e)
        }
    })
}

// 转换为数字
const toNumber = (val) => {
    if (isEmpty(val)) {
        return null
    }
    // 校验类型是否为数字
    if (typeof val === 'number') {
        return val
    } else if (typeof val === 'string' && !isNaN(val)) {
        // 校验字符串是否为数字
        return Number(val)
    } else {
        return null
    }
}

const focusHandler = (e) => {
    emits('focus', e)
}

const blur = (e) => {
    emits('blur', e.detail)
}
</script>

<style scoped lang="scss">

:deep(.uni-easyinput__content-input) {
    background: #F6F5F5;
    border-radius: 10rpx;
    box-sizing: border-box;
}

/* #ifdef MP-WEIXIN */
:deep(.bang-input-base-bgc) {
    background: #F6F5F5 !important;
}

.bang-textarea {
    padding-left: 20rpx;
}

/* #endif */

:deep(.uni-easyinput__content-textarea) {
    background: #F6F5F5;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 8px 10px;
    margin: 0;
}

:deep(.uni-input-input) {
    font-family: PingFang-SC-Medium, PingFang-SC-Medium !important;
    font-weight: normal !important;
    font-size: 28rpx !important;
    color: $uni-text-color;
}

:deep(.uni-textarea-textarea) {
    font-family: PingFang-SC-Medium, PingFang-SC-Medium !important;
    font-weight: normal !important;
    font-size: 28rpx !important;
}
</style>
